// 模拟数据 - 实际项目中会从API获取
const worksData = [
  {
    id: 1,
    title: "春日少女",
    image: "https://picsum.photos/seed/art1/600/400",
    category: "illustration",
    description: "这幅作品描绘了春天里的一位少女，使用了柔和的色彩和细腻的线条，展现出春天的生机与活力。",
    date: "2023-04-15"
  },
  {
    id: 2,
    title: "幻想世界",
    image: "https://picsum.photos/seed/art2/600/400",
    category: "concept",
    description: "这是一个幻想世界的概念设计，包含了独特的建筑和生物设计，灵感来源于北欧神话。",
    date: "2023-03-22"
  },
  {
    id: 3,
    title: "雨夜",
    image: "https://picsum.photos/seed/art3/600/400",
    category: "illustration",
    description: "雨夜场景的描绘，通过光影对比和氛围营造，展现出城市夜晚的孤独与美丽。",
    date: "2023-05-01"
  },
  {
    id: 4,
    title: "魔法学院",
    image: "https://picsum.photos/seed/art4/600/400",
    category: "concept",
    description: "魔法学院的场景设计，融合了哥特式建筑和奇幻元素，创造出神秘而庄严的氛围。",
    date: "2023-02-18"
  },
  {
    id: 5,
    title: "日常片段",
    image: "https://picsum.photos/seed/art5/600/400",
    category: "comic",
    description: "四格漫画记录日常生活中的小确幸，希望能给读者带来轻松愉快的阅读体验。",
    date: "2023-05-12"
  },
  {
    id: 6,
    title: "夏日祭",
    image: "https://picsum.photos/seed/art6/600/400",
    category: "illustration",
    description: "夏日祭典的场景描绘，色彩鲜艳明快，展现出节日的热闹与欢乐氛围。",
    date: "2023-06-30"
  }
];

const videosData = [
  {
    id: 1,
    title: "人物脸部绘画技巧",
    thumbnail: "https://picsum.photos/seed/video1/600/400",
    duration: "18:45",
    date: "2023-05-20"
  },
  {
    id: 2,
    title: "背景透视基础教学",
    thumbnail: "https://picsum.photos/seed/video2/600/400",
    duration: "24:12",
    date: "2023-04-10"
  },
  {
    id: 3,
    title: "春日少女绘制全过程",
    thumbnail: "https://picsum.photos/seed/video3/600/400",
    duration: "32:58",
    date: "2023-03-15"
  }
];

const blogsData = [
  {
    id: 1,
    title: "我的绘画工具分享",
    image: "https://picsum.photos/seed/blog1/600/400",
    date: "2023-05-25",
    excerpt: "今天想和大家分享一下我常用的绘画工具，包括数位板、绘画软件以及一些辅助工具，希望对刚入门的同学有所帮助..."
  },
  {
    id: 2,
    title: "如何克服创作瓶颈",
    image: "https://picsum.photos/seed/blog2/600/400",
    date: "2023-04-18",
    excerpt: "每个创作者都会遇到瓶颈期，我最近也经历了一段艰难的时期。在这里分享一下我是如何调整心态，重新找到创作灵感的..."
  },
  {
    id: 3,
    title: "参加动漫展的心得体会",
    image: "https://picsum.photos/seed/blog3/600/400",
    date: "2023-03-30",
    excerpt: "上周末参加了本地的动漫展，见到了很多优秀的创作者和热情的粉丝，收获满满。这次展会让我对自己的创作有了新的思考..."
  }
];

// DOM 元素
const worksContainer = document.getElementById('works-container');
const videosContainer = document.getElementById('videos-container');
const blogContainer = document.getElementById('blog-container');
const filterBtns = document.querySelectorAll('.filter-btn');
const workModal = document.getElementById('work-modal');
const modalImage = document.querySelector('.modal-image');
const modalTitle = document.querySelector('.modal-title');
const modalDescription = document.querySelector('.modal-description');
const modalDate = document.querySelector('.modal-date');
const modalCategory = document.querySelector('.modal-category');
const closeModal = document.querySelector('.close-modal');
const messageForm = document.getElementById('message-form');
const loadMoreBtn = document.querySelector('.load-more-btn');

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', () => {
  renderWorks(worksData);
  renderVideos(videosData);
  renderBlogs(blogsData);
  
  // 头像加载失败时显示占位符
  const avatar = document.querySelector('.avatar');
  const avatarPlaceholder = document.querySelector('.avatar-placeholder');
  
  avatar.addEventListener('error', () => {
    avatar.style.display = 'none';
    avatarPlaceholder.style.display = 'flex';
  });
});

// 渲染作品
function renderWorks(works) {
  worksContainer.innerHTML = '';
  
  works.forEach(work => {
    const workCard = document.createElement('div');
    workCard.className = `work-card ${work.category}`;
    workCard.innerHTML = `
      <img src="${work.image}" alt="${work.title}" class="work-image">
      <div class="work-info">
        <h3 class="work-title">${work.title}</h3>
        <p class="work-category">${getCategoryName(work.category)}</p>
      </div>
    `;
    
    workCard.addEventListener('click', () => openWorkModal(work));
    worksContainer.appendChild(workCard);
  });
}

// 渲染视频
function renderVideos(videos) {
  videosContainer.innerHTML = '';
  
  videos.forEach(video => {
    const videoCard = document.createElement('div');
    videoCard.className = 'video-card';
    videoCard.innerHTML = `
      <div class="video-thumbnail">
        <img src="${video.thumbnail}" alt="${video.title}">
        <span class="video-duration">${video.duration}</span>
        <div class="video-play-btn">
          <i class="fas fa-play"></i>
        </div>
      </div>
      <div class="video-info">
        <h3 class="video-title">${video.title}</h3>
        <p class="video-date">${video.date}</p>
      </div>
    `;
    
    videosContainer.appendChild(videoCard);
  });
}

// 渲染博客
function renderBlogs(blogs) {
  blogContainer.innerHTML = '';
  
  blogs.forEach(blog => {
    const blogCard = document.createElement('div');
    blogCard.className = 'blog-card';
    blogCard.innerHTML = `
      <img src="${blog.image}" alt="${blog.title}" class="blog-image">
      <div class="blog-content">
        <p class="blog-date">${blog.date}</p>
        <h3 class="blog-title">${blog.title}</h3>
        <p class="blog-excerpt">${blog.excerpt}</p>
        <a href="#" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
      </div>
    `;
    
    blogContainer.appendChild(blogCard);
  });
}

// 打开作品详情模态框
function openWorkModal(work) {
  modalImage.src = work.image;
  modalTitle.textContent = work.title;
  modalDescription.textContent = work.description;
  modalDate.textContent = work.date;
  modalCategory.textContent = getCategoryName(work.category);
  
  workModal.style.display = 'flex';
  document.body.style.overflow = 'hidden'; // 防止背景滚动
}

// 关闭模态框
function closeWorkModal() {
  workModal.style.display = 'none';
  document.body.style.overflow = ''; // 恢复背景滚动
}

// 过滤作品
function filterWorks(category) {
  filterBtns.forEach(btn => btn.classList.remove('active'));
  event.currentTarget.classList.add('active');
  
  if (category === 'all') {
    renderWorks(worksData);
  } else {
    const filteredWorks = worksData.filter(work => work.category === category);
    renderWorks(filteredWorks);
  }
}

// 获取分类名称
function getCategoryName(category) {
  const categories = {
    'illustration': '插画',
    'concept': '概念设计',
    'comic': '漫画'
  };
  
  return categories[category] || category;
}

// 加载更多博客
function loadMoreBlogs() {
  // 模拟加载更多
  loadMoreBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
  
  // 模拟API请求延迟
  setTimeout(() => {
    const moreBlogs = [
      {
        id: 4,
        title: "色彩搭配技巧分享",
        image: "https://picsum.photos/seed/blog4/600/400",
        date: "2023-02-20",
        excerpt: "色彩是绘画中非常重要的元素，今天想和大家分享一些我常用的色彩搭配技巧，以及如何通过色彩来表达情感..."
      },
      {
        id: 5,
        title: "我的第一个商业合作经历",
        image: "https://picsum.photos/seed/blog5/600/400",
        date: "2023-01-15",
        excerpt: "最近完成了我的第一个商业插画合作项目，过程中有很多收获和感悟，想在这里记录下来，也给其他创作者一些参考..."
      }
    ];
    
    // 添加到现有博客
    moreBlogs.forEach(blog => {
      const blogCard = document.createElement('div');
      blogCard.className = 'blog-card';
      blogCard.innerHTML = `
        <img src="${blog.image}" alt="${blog.title}" class="blog-image">
        <div class="blog-content">
          <p class="blog-date">${blog.date}</p>
          <h3 class="blog-title">${blog.title}</h3>
          <p class="blog-excerpt">${blog.excerpt}</p>
          <a href="#" class="read-more">阅读更多 <i class="fas fa-arrow-right"></i></a>
        </div>
      `;
      
      blogContainer.appendChild(blogCard);
    });
    
    loadMoreBtn.textContent = '加载更多';
    
    // 如果没有更多内容，可以隐藏按钮
    // loadMoreBtn.style.display = 'none';
  }, 1500);
}

// 提交消息
function submitMessage(e) {
  e.preventDefault();
  
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;
  
  // 模拟API提交
  const submitBtn = document.querySelector('.submit-btn');
  submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 发送中...';
  
  // 模拟API请求延迟
  setTimeout(() => {
    // 实际项目中这里会有API调用
    console.log({ name, email, message });
    
    // 显示成功消息
    alert('消息发送成功！感谢您的留言。');
    
    // 重置表单
    messageForm.reset();
    submitBtn.textContent = '发送消息';
  }, 1500);
}

// 事件监听
filterBtns.forEach(btn => btn.addEventListener('click', function() {
  filterWorks(this.getAttribute('data-filter'));
}));

closeModal.addEventListener('click', closeWorkModal);

// 点击模态框外部关闭
workModal.addEventListener('click', (e) => {
  if (e.target === workModal) {
    closeWorkModal();
  }
});

// 加载更多按钮
loadMoreBtn.addEventListener('click', loadMoreBlogs);

// 表单提交
messageForm.addEventListener('submit', submitMessage);

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    
    const targetId = this.getAttribute('href');
    const targetElement = document.querySelector(targetId);
    
    if (targetElement) {
      window.scrollTo({
        top: targetElement.offsetTop - 70, // 减去导航栏高度
        behavior: 'smooth'
      });
      
      // 更新活跃导航项
      document.querySelectorAll('.nav-links a').forEach(link => {
        link.classList.remove('active');
      });
      this.classList.add('active');
    }
  });
});